import {
  BulbOutlined,
  GlobalOutlined,
  RobotOutlined,
  RocketOutlined,
  SafetyOutlined,
  ThunderboltOutlined,
} from '@ant-design/icons';
import {
  PageContainer,
  ProCard,
  StatisticCard,
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Col, Row, Space, Tag, Typography, theme } from 'antd';
import React from 'react';

const { Title, Paragraph, Text } = Typography;

/**
 * 功能卡片组件
 */
const FeatureCard: React.FC<{
  icon: React.ReactNode;
  title: string;
  desc: string;
}> = ({ icon, title, desc }) => {
  const { token } = theme.useToken();

  return (
    <ProCard
      hoverable
      style={{
        height: '100%',
        transition: 'all 0.3s ease',
      }}
      bodyStyle={{
        padding: '24px',
      }}
    >
      <Space direction="vertical" size={16} style={{ width: '100%' }}>
        <div
          style={{
            fontSize: 32,
            color: token.colorPrimary,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: 64,
            height: 64,
            borderRadius: '50%',
            background: `${token.colorPrimary}15`,
          }}
        >
          {icon}
        </div>
        <Title level={4} style={{ margin: 0 }}>
          {title}
        </Title>
        <Paragraph
          style={{
            margin: 0,
            color: token.colorTextSecondary,
            fontSize: 14,
            lineHeight: '22px',
          }}
        >
          {desc}
        </Paragraph>
      </Space>
    </ProCard>
  );
};

/**
 * 应用场景卡片
 */
const ScenarioCard: React.FC<{
  title: string;
  tags: string[];
  desc: string;
}> = ({ title, tags, desc }) => {
  const { token } = theme.useToken();

  return (
    <ProCard
      hoverable
      style={{
        height: '100%',
        transition: 'all 0.3s ease',
      }}
      bodyStyle={{
        padding: '20px',
      }}
    >
      <Space direction="vertical" size={12} style={{ width: '100%' }}>
        <Title level={5} style={{ margin: 0 }}>
          {title}
        </Title>
        <Space wrap>
          {tags.map((tag) => (
            <Tag key={tag} color="blue">
              {tag}
            </Tag>
          ))}
        </Space>
        <Text
          style={{
            color: token.colorTextSecondary,
            fontSize: 13,
            lineHeight: '20px',
          }}
        >
          {desc}
        </Text>
      </Space>
    </ProCard>
  );
};

const Welcome: React.FC = () => {
  const { token } = theme.useToken();
  const { initialState } = useModel('@@initialState');

  return (
    <PageContainer
      title="人工智能推介官"
      subTitle="智能推荐 · 精准匹配 · 高效决策"
    >
      <Space direction="vertical" size={24} style={{ width: '100%' }}>
        {/* Hero 区域 */}
        <ProCard
          style={{
            background:
              initialState?.settings?.navTheme === 'realDark'
                ? 'linear-gradient(135deg, #1A1B1F 0%, #2C2D31 100%)'
                : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: '#fff',
          }}
          bodyStyle={{
            padding: '48px 32px',
          }}
        >
          <Row gutter={[32, 32]} align="middle">
            <Col xs={24} md={16}>
              <Space direction="vertical" size={16}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <RobotOutlined style={{ fontSize: 48 }} />
                  <Title level={1} style={{ color: '#fff', margin: 0 }}>
                    AI 推介官
                  </Title>
                </div>
                <Paragraph
                  style={{
                    color: 'rgba(255, 255, 255, 0.9)',
                    fontSize: 16,
                    lineHeight: '28px',
                    margin: 0,
                  }}
                >
                  基于先进的人工智能技术，为您提供智能化的推荐服务。通过深度学习算法分析用户行为、偏好和需求，
                  实现精准匹配和个性化推荐，助力企业提升决策效率和用户体验。
                </Paragraph>
                <Space wrap>
                  <Tag
                    color="gold"
                    style={{ fontSize: 14, padding: '4px 12px' }}
                  >
                    智能分析
                  </Tag>
                  <Tag
                    color="cyan"
                    style={{ fontSize: 14, padding: '4px 12px' }}
                  >
                    精准推荐
                  </Tag>
                  <Tag
                    color="purple"
                    style={{ fontSize: 14, padding: '4px 12px' }}
                  >
                    实时响应
                  </Tag>
                </Space>
              </Space>
            </Col>
            <Col xs={24} md={8}>
              <StatisticCard.Group direction="column">
                <StatisticCard
                  statistic={{
                    title: '推荐准确率',
                    value: 95.8,
                    suffix: '%',
                  }}
                  style={{ background: 'rgba(255, 255, 255, 0.15)' }}
                  bodyStyle={{ color: '#fff' }}
                />
                <StatisticCard
                  statistic={{
                    title: '日均处理量',
                    value: 1000000,
                    suffix: '+',
                  }}
                  style={{ background: 'rgba(255, 255, 255, 0.15)' }}
                  bodyStyle={{ color: '#fff' }}
                />
              </StatisticCard.Group>
            </Col>
          </Row>
        </ProCard>

        {/* 核心功能 */}
        <ProCard title="核心功能" headerBordered>
          <Row gutter={[16, 16]}>
            <Col xs={24} sm={12} lg={8}>
              <FeatureCard
                icon={<BulbOutlined />}
                title="智能分析"
                desc="运用机器学习算法，深度挖掘数据价值，精准识别用户需求和行为模式，为推荐决策提供科学依据。"
              />
            </Col>
            <Col xs={24} sm={12} lg={8}>
              <FeatureCard
                icon={<ThunderboltOutlined />}
                title="实时推荐"
                desc="毫秒级响应速度，实时计算和更新推荐结果，确保用户获得最新、最相关的推荐内容。"
              />
            </Col>
            <Col xs={24} sm={12} lg={8}>
              <FeatureCard
                icon={<SafetyOutlined />}
                title="安全可靠"
                desc="采用企业级安全架构，数据加密传输和存储，严格的权限管理，保障数据安全和隐私保护。"
              />
            </Col>
            <Col xs={24} sm={12} lg={8}>
              <FeatureCard
                icon={<GlobalOutlined />}
                title="多场景适配"
                desc="支持电商、内容、社交等多种业务场景，灵活配置推荐策略，满足不同行业的个性化需求。"
              />
            </Col>
            <Col xs={24} sm={12} lg={8}>
              <FeatureCard
                icon={<RocketOutlined />}
                title="持续优化"
                desc="基于用户反馈和效果数据，持续迭代优化推荐模型，不断提升推荐质量和用户满意度。"
              />
            </Col>
            <Col xs={24} sm={12} lg={8}>
              <FeatureCard
                icon={<RobotOutlined />}
                title="自动化运营"
                desc="智能化的运营工具，自动生成推荐策略，减少人工干预，降低运营成本，提高工作效率。"
              />
            </Col>
          </Row>
        </ProCard>

        {/* 应用场景 */}
        <ProCard title="应用场景" headerBordered>
          <Row gutter={[16, 16]}>
            <Col xs={24} md={12} lg={8}>
              <ScenarioCard
                title="电商推荐"
                tags={['商品推荐', '个性化营销', '智能搜索']}
                desc="基于用户浏览、购买历史，智能推荐相关商品，提升转化率和客单价，实现精准营销。"
              />
            </Col>
            <Col xs={24} md={12} lg={8}>
              <ScenarioCard
                title="内容分发"
                tags={['资讯推送', '视频推荐', '个性化阅读']}
                desc="根据用户兴趣和阅读习惯，智能推送相关内容，提高用户粘性和平台活跃度。"
              />
            </Col>
            <Col xs={24} md={12} lg={8}>
              <ScenarioCard
                title="社交匹配"
                tags={['好友推荐', '兴趣社群', '智能匹配']}
                desc="分析用户社交关系和兴趣标签，推荐潜在好友和相关社群，促进用户互动。"
              />
            </Col>
            <Col xs={24} md={12} lg={8}>
              <ScenarioCard
                title="金融服务"
                tags={['产品推荐', '风险评估', '智能投顾']}
                desc="根据用户财务状况和风险偏好，推荐合适的金融产品，提供个性化理财建议。"
              />
            </Col>
            <Col xs={24} md={12} lg={8}>
              <ScenarioCard
                title="教育培训"
                tags={['课程推荐', '学习路径', '智能辅导']}
                desc="基于学习进度和能力评估，推荐适合的课程和学习资源，制定个性化学习计划。"
              />
            </Col>
            <Col xs={24} md={12} lg={8}>
              <ScenarioCard
                title="企业服务"
                tags={['人才匹配', '供应链优化', '智能决策']}
                desc="为企业提供人才推荐、供应商匹配等服务，优化资源配置，提升运营效率。"
              />
            </Col>
          </Row>
        </ProCard>

        {/* 技术优势 */}
        <ProCard title="技术优势" headerBordered>
          <Row gutter={[24, 24]}>
            <Col xs={24} md={12}>
              <ProCard type="inner" title="先进算法">
                <Paragraph style={{ marginBottom: 8 }}>
                  • 深度学习神经网络模型
                </Paragraph>
                <Paragraph style={{ marginBottom: 8 }}>
                  • 协同过滤与内容推荐融合
                </Paragraph>
                <Paragraph style={{ marginBottom: 8 }}>
                  • 强化学习持续优化
                </Paragraph>
                <Paragraph style={{ marginBottom: 0 }}>
                  • 多模态数据融合分析
                </Paragraph>
              </ProCard>
            </Col>
            <Col xs={24} md={12}>
              <ProCard type="inner" title="高性能架构">
                <Paragraph style={{ marginBottom: 8 }}>
                  • 分布式计算集群
                </Paragraph>
                <Paragraph style={{ marginBottom: 8 }}>
                  • 实时流式数据处理
                </Paragraph>
                <Paragraph style={{ marginBottom: 8 }}>
                  • 智能缓存策略
                </Paragraph>
                <Paragraph style={{ marginBottom: 0 }}>
                  • 弹性伸缩能力
                </Paragraph>
              </ProCard>
            </Col>
          </Row>
        </ProCard>
      </Space>
    </PageContainer>
  );
};

export default Welcome;
